<template>
  <div>
    <div class="input-group mb-3">
      <input
        v-model="param"
        type="text"
        class="form-control"
        placeholder="输入参数"
        aria-label="输入参数"
        aria-describedby="basic-addon2"
      >
      <button @click="sendWebhookRequest" class="btn btn-primary" type="button">你想对我说什么</button>
    </div>
    <div v-if="response" class="alert alert-info mt-3">{{ response }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      response: null,
      param: '', // 用户输入的参数
    };
  },
  methods: {
    sendWebhookRequest() {
      // 使用用户输入的参数来构建 Webhook URL
      const webhookURL = `http://1.15.7.2:23260/hook?access_key=J3J9VdbtMVQIphqy9ZZtr9yten6XMa7xNXRM7DvqxbHXLA3G&param=${this.param}`;

      // 使用fetch发送GET请求
      fetch(webhookURL, {
        method: 'GET',
        mode: 'no-cors', // 跳过CORS检查
      })
        .then((response) => response.text())
        .then((data) => {
          this.response = data;
        })
        .catch((error) => {
          this.response = `发生错误: ${error}`;
        });
    },
  },
};
</script>
